@import '../../mixins'

@import './vars'
@import './animations'

@import './btn'
@import './scroll-box'

@import './inputs'


html
  box(relative)
  size(h: 100%)
  text(s: 16px)

body
  box(relative)
  size(100%, same)
  text(sans-serif, smooth: on)
  overflow: hidden
  padding: 0
  margin: 0
  a
    text-decoration: none

.root
  box(relative, flex, border-box)
  size(100%, same)
  align-items: center
  background-color: var(--bg)

  &[data-style]
    opacity: 1

.root > .nav
  box(relative, flex)
  size(h: 100%)
  flex-flow: column
  justify-content: flex-start
  align-items: flex-start
  background-color: #00000008
  z-index: 1
  padding: 0
  &:before
    content: ''
    box(absolute)
    size(1px, 100%)
    pos(0, r: 0)
    background-color: var(--border-fg)
  &:after
    content: ''
    box(absolute)
    size(1px, 100%)
    pos(0, r: -1px)
    background-color: var(--border-flare-fg)

  > div
    size(h: 100%)
    overflow-y: auto
    overflow-x: hidden
    background-image: var(--bg-img)
    background-size: var(--bg-size)
    background-attachment: local

.root > .nav .option
.root > .nav .sub-option
  box(relative)
  size(calc(100% - 40px))
  text(s: rem(19))
  color: var(--inactive-fg)
  padding: 12px 24px 3px 16px
  white-space: nowrap
  cursor: pointer
  -moz-user-select: none
  &:hover
    color: var(--info-fg)
  &[data-active]
    color: var(--active-fg)
  &:last-of-type
    padding-bottom: 12px

.root > .nav .sub-option
  text(s: rem(17))
  padding: 3px 28px 3px 36px

// --- Hidden elements ---
.hidden
.hidden-assets
  box(absolute)
  pos(0, 0)
  size(0, 0)
  overflow: hidden
  opacity: 0

footer
  box(relative, flex)
  margin: 20px auto 50px
  justify-content: center
  align-items: center
  color: var(--inactive-fg)

  .github
  .amo
    box(relative)
    size(24px, same)
    opacity: .5
    transition: opacity var(--d-fast)
    &:hover
      opacity: 1
    &:active
      opacity: .7
    svg
      box(absolute)
      size(100%, same)
      fill: #646464
  
  .amo svg
    pos(-5px, r: 3px)
    transform: rotateZ(-45deg)

  .logo
    box(relative)
    size(36px, same)
    padding: 0 36px
    fill: #646464
    cursor: default
    opacity: .24


.settings-enter-active
.settings-leave-active
  transition: z-index var(--d-fast), transform var(--d-fast), opacity var(--d-fast)
.settings-enter
  opacity: 0
.settings-enter-to
  opacity: 1
.settings-leave
  opacity: 1
.settings-leave-to
  opacity: 0

// ---
// -- Settings root component
// -
.Settings
  box(relative)
  size(100%, 100%)
  overflow-y: auto
  background-attachment: local
  background-image: var(--bg-img)
  background-size: var(--bg-size)

.wrapper
  box(relative)
  size(100%)

.Settings section
  box(relative, grid)
  size(calc(100% - 16px), max-w: 640px)
  padding: 2px 8px 50px
  margin: 0 auto

.Settings section > h2
  box(relative, flex)
  size(100%)
  text(s: rem(29), w: 400)
  justify-content: center
  align-items: flex-end
  color: var(--title-fg)
  text-align: center
  margin: 28px 0 24px

.Settings .title-note
  position: relative
  width: 0
  font-size: rem(16)
  color: var(--info-fg)
  text-align: center
  white-space: pre

.Settings .IconSelectField > .IconSelectInput
  justify-content: flex-end
  margin-left: auto
  padding-left: 16px

.Settings .sub-fields
  box(relative)
  grid-gap: 16px 0
  margin: 0 0 0 24px

  &:not(:first-of-type):not(.-nosep):after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)

.Settings .ctrls
  box(relative, flex)
  grid-gap: 8px 8px
  justify-content: center
  align-items: center
  flex-wrap: wrap
  margin: 16px 16px 5px

.Settings .fetch-progress
  box(relative, flex)
  size(50%)
  flex-direction: column
  justify-content: center
  align-items: center

.Settings .progress-bar
  box(relative)
  size(100%, 5px)
  border-radius: 3px
  box-shadow: 0 0 0 1px var(--border-fg)
  overflow: hidden
  margin-top: 12px
  background-color: #00000016

.Settings .progress-lvl
  box(absolute)
  size(100%, same)
  pos(l: -100%)
  background-color: var(--active-fg)

.Settings .progress-info
  box(relative, flex)
  size(100%)
  justify-content: center
  align-items: center

.Settings .progress-done
.Settings .progress-errors
  text(s: rem(11))
  color: var(--info-fg)
  margin: 5px 8px 16px


// --- Panel card ---
.Settings .panel-card
  box(relative, flex)
  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, same)
    border-radius: 3px
    background-color: #00000016
    opacity: 0
    transition: opacity var(--d-fast)
  &:not(:first-of-type):after
  &.-separate:after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)
  &:hover:before
    opacity: 1
  &:active:before
    transition: none
    opacity: .7

.Settings .panel-placeholder
  box(relative)
  size(100%, 32px)
  &:before
    content: ''
    box(absolute)
    pos(5px, calc(50% - 2px))
    size(5px, same)
    border-radius: 50%
    transform: translateZ(0)
    background-color: var(--inactive-fg)
    box-shadow: 8px 0 0 0 var(--inactive-fg), -8px 0 0 0 var(--inactive-fg)

.Settings .panel-card-body
  box(relative, flex)
  align-items: center
  padding: 8px 8px 8px 12px
  flex-grow: 1
  opacity: .7
  cursor: pointer
  transition: opacity var(--d-fast)

.Settings .panel-card-icon
  box(relative)
  size(16px, same)
  flex-shrink: 0
  margin: 2px 8px 2px 0
  > img
    box(absolute)
    size(100%, same)
  > svg
    box(absolute)
    size(100%, same)
    fill: var(--container-fg, var(--info-fg))

.Settings .panel-card-name
  box(relative)
  text(s: rem(18))
  color: var(--label-fg)
  cursor: pointer
  -moz-user-select: none

.Settings .panel-card-ctrls
  box(relative, flex)
  margin: 0 8px
  align-items: center

.Settings .panel-card-ctrl
  box(relative)
  size(24px, same)
  margin: 0 2px
  cursor: pointer
  opacity: .5
  &:hover
    opacity: 1
  &:active
    opacity: .5
  > svg
    box(absolute)
    size(16px, same)
    pos(4px, same)
    fill: var(--label-fg)
  &.-up > svg
    transform: rotateZ(180deg)
  &.-rm > svg
    size(18px, same)
    pos(3px, same)
    fill: var(--false-fg)
  &[data-inactive]
    cursor: default
    opacity: .2

.Settings .panel-config-layer
  box(fixed, flex)
  pos(0, 0)
  size(100vw, 100vh)
  flex-direction: column
  justify-content: flex-start
  align-items: center
  z-index: 1
  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, same)
    background-color: var(--bg)
    opacity: .5
  &:after
    content: ''
    box(relative)
    size(100%, 64px)
    flex-shrink: 10     

.Settings .panel-config-box
  box(relative)
  size(calc(100vw - 8px), max-w: 640px, min-h: 32px)
  margin: 16px 0
  overflow: hidden
  background-color: var(--bg)
  border-radius: 3px
  box-shadow: 0 1px 3px 0 #00000032,
              0 0 0 1px var(--border-fg),
              inset 0 1px 0 0 var(--border-flare-fg)

.panel-enter-active
.panel-leave-active
  transition: transform var(--d-fast), opacity var(--d-fast)
.panel-leave-active
  box(absolute)
.panel-move
  transition: transform var(--d-fast), opacity var(--d-fast)
.panel-enter
  opacity: 0
  transform: scale(1, 0.8)
.panel-enter-to
  opacity: 1
  transform: scale(1, 1)
.panel-leave
  opacity: 0
  transform: scale(1, 1)
.panel-leave-to
  opacity: 0
  transform: scale(1, 0.8)

.panel-config-enter-active
.panel-config-leave-active
  transition: opacity var(--d-fast)
  .panel-config-box
    transition: transform var(--d-fast)
.panel-config-enter
  opacity: 0
  .panel-config-box
    transform: translateY(32px)
.panel-config-enter-to
  opacity: 1
  .panel-config-box
    transform: translateY(0)
.panel-config-leave
  opacity: 1
  .panel-config-box
    transform: translateY(0)
.panel-config-leave-to
  opacity: 0
  .panel-config-box
    transform: translateY(32px)

// --- Container ---
.Settings .box
  box(relative, flex)
  grid-gap: 16px 8px
  flex-wrap: wrap
  margin: 0 16px

.Settings .box > .label
  box(relative)
  text(s: rem(14))
  color: var(--label-fg)
  margin: 0

.Settings .note-field
  box(relative, flex)
  size(min-h: 42px)
  justify-content: space-between
  align-items: center
  flex-wrap: wrap
  padding: 0 16px
  flex-shrink: 0

  &:not(:first-of-type):after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)

  .label
    box(relative)
    text(s: rem(16), h: 26px)
    padding: 8px 0 4px
    align-self: flex-start
    color: var(--info-fg)
    transition: color var(--d-fast)
  
  .note
    box(relative)
    text(s: rem(14)) 
    size(max-w: 100%)
    padding: 0 0 8px 16px
    white-space: pre-wrap
    color: var(--info-fg)

.Settings .info
  box(relative)
  text(s: rem(13)) 
  size(max-w: 100%)
  padding: 0 0 0 16px
  white-space: pre-wrap
  color: var(--info-fg)

.Settings .btn
  size(auto)
  padding: 5px 16px

// --- Keybindings ---
.Settings .keybinding
  box(relative, flex)
  flex-direction: row
  justify-content: space-between
  align-items: flex-start
  padding: 0 16px
  cursor: pointer
  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, same)
    border-radius: 3px
    background-color: #00000012
    opacity: 0
    transition: opacity var(--d-fast)
  &:not(:first-of-type):after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)
  &:hover:before
    opacity: 1
  &:active:before
    transition: none
    opacity: .5
  &[is-focused]:not([data-disabled])
    opacity: 1
    > .value
      color: var(--active-fg)
      box-shadow: inset 0 0 0 1px var(--active-fg)
    > .label
      color: var(--active-fg)
  &[data-error]:not([data-disabled])
    opacity: 1
    > .value
      color: var(--false-fg)
      box-shadow: inset 0 0 0 1px var(--false-fg)
    > .label
      color: var(--false-fg)
  &[data-disabled]
    opacity: .3

.Settings .keybinding > .label
  box(relative)
  text(s: rem(16))
  flex-grow: 1
  color: var(--label-fg)
  margin: 0 6px 0 0
  padding: 6px 0
  transition: color var(--d-fast)

.Settings .keybinding > .value
  box(relative)
  text(s: rem(13))
  padding: 2px 6px
  margin: 6px 0 6px auto
  color: var(--label-fg)
  background-color: #78787832
  box-shadow: inset 0 0 0 1px var(--info-fg)
  border-radius: 4px
  white-space: nowrap

.Settings .keybinding > input
  box(absolute)
  size(0, same)
  pos(0, 0)
  opacity: 0
  z-index: -1

.Settings .keybinding > .ToggleInput
  padding: 6px 0 6px 16px
  flex-wrap: nowrap

.Settings .permission
  box(relative)

  &:not(:first-of-type):after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)

.Settings .permission[data-highlight]
  box(relative)

.Settings .permission[data-highlight]:before
  content: ''
  box(absolute)
  pos(-8px, -8px)
  size(calc(100% + 16px), same)
  outline: 2px dashed var(--false-fg)
  outline-offset: -2px


.Settings .storage-prop
  box(relative, flex)
  size(calc(100% - 16px))
  align-items: center
  padding: 2px 8px
  border-radius: 3px
  grid-gap: 8px
  &:nth-child(2n+1)
    background-color: #00000012
  &:hover
    background-color: #00000024

.Settings .storage-prop .name
  box(relative)
  text(s: rem(16))
  color: var(--label-fg)
  margin-right: auto
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.Settings .storage-prop .size
  box(relative)
  text(s: rem(14))
  color: var(--info-fg)
  white-space: nowrap

.Settings .storage-prop .del-btn
  box(relative)
  text(s: rem(14))
  color: var(--false-fg)
  white-space: nowrap
  cursor: pointer
  -moz-user-select: none
  &:hover
    opacity: .7
  &:active
    opacity: .5

.Settings .storage-prop .open-btn
  box(relative)
  text(s: rem(14))
  color: var(--active-fg)
  white-space: nowrap
  cursor: pointer
  -moz-user-select: none
  &:hover
    opacity: .7
  &:active
    opacity: .5

.Settings .details-box
  box(fixed, flex)
  size(100vw, 100vh)
  pos(0, 0)
  flex-flow: column
  align-items: center
  background-color: var(--bg)
  background-attachment: local
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  z-index: 1
  overflow: auto

.Settings .details-box > .box
  box(fixed)
  pos(32px, r: 32px)
  align-items: flex-end
  z-index: 1

.Settings .details-box .copy-btn
.Settings .details-box .close-btn
  box(relative)
  text(s: rem(18))
  padding: 8px 16px
  color: var(--active-fg)
  z-index: 1
  cursor: pointer
  &:hover
    opacity: .7
  &:active
    opacity: .5

.Settings .details-box .close-btn
  color: var(--false-fg)

.Settings .details-box .json
  box(relative)
  size(max-w: 100%)
  text(monospace, s: rem(11))
  padding: 32px 40px
  white-space: pre
  margin: 0 auto
  color: var(--label-fg)

.Settings .split-box
  box(relative, flex)

.Settings .half-box
  box(relative)
  size(50%)


// --- Sync
.sync-data
  box(relative, flex)
  size(calc(100% - 32px))
  justify-content: center
  align-items: flex-start
  padding: 8px 16px

  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, same)
    border-radius: 3px
    background-color: #00000012
    opacity: 0
    transition: opacity var(--d-fast)

  &:not(:first-of-type):after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)

  &.-no-separator:after
    box(none)

  &:hover:before
    opacity: 1

  &:active:before
    transition: none
    opacity: .5

.sync-title
  box(relative)
  text(s: rem(16))
  color: var(--label-fg)
  padding: 2px 0
  margin-right: auto

.sync-list
  box(relative, flex)
  flex-direction: column
  grid-gap: 8px 0

.sync-item
  box(relative, flex)
  justify-content: center
  align-items: center

.sync-info
  box(relative)
  text(s: rem(12))
  color: var(--info-fg)
  margin-left: auto

.btn.sync-btn
  text(s: rem(14))
  padding: 3px 8px
  margin-left: 8px
  margin-right: -2px

@import './panel-config'
@import './menu-editor'
@import './styles-editor'
@import './snapshots'